<template>
	<view class="user-perfetion-page">
		<view class="form-tbody">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" :label-width="200">

				<uni-forms-item label="时间类型" required>
					<uni-data-checkbox v-model="formData.datatype" :localdata="datatype" />
				</uni-forms-item>
				<uni-forms-item label="时间" required name="date_time" v-if="formData.datatype ==1">
					<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.date_time" />
				</uni-forms-item>
				<uni-forms-item label="时间" required name="date_time" v-if="formData.datatype==2">
					<picker mode="date" :value="formData.date_time" fields="month" @change="bindDateChange">
						<uni-easyinput type="text" v-model="formData.date_time" placeholder="请选择月份" />
					</picker>
				</uni-forms-item>

				<uni-forms-item label="类型" required>
					<uni-data-checkbox v-model="formData.unt" :localdata="untype" />
				</uni-forms-item>
				<uni-forms-item label="品名" required name="name">
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="单价" required name="price">
					<div class="input-box">
						<uni-easyinput type="text" v-model="formData.price" placeholder="请输入" @click="input()" />
						<span class="dw">
							<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
						</span>
					</div>
				</uni-forms-item>
				<uni-forms-item label="数量" name="manage">
					<div class="input-box">
						<uni-easyinput type="text" v-model="formData.num" placeholder="请输入" @click="input()" />
					</div>
				</uni-forms-item>
				<uni-forms-item label="合计" name="manage">
					<uni-easyinput type="text" v-model="formData.price_all" placeholder="请输入" />
				</uni-forms-item>

				<uni-forms-item label="是否公开" required>
					<uni-data-checkbox v-model="formData.is_open" :localdata="open" />
				</uni-forms-item>
			</uni-forms>

		</view>
		<div class="foot">
			<button class="submit" @click="submit">提交</button>
		</div>
	</view>
</template>

<script>
	// https://ext.dcloud.net.cn/plugin?id=7446 身份证正反面上传文档
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	export default {
		data() {
			return {
				formData: {
					name: '',
					datatype: 1,
					unt: 1,
					date_time: "",
					price: '',
					num: 1,
					price_all: 0,
					unit: '',
					is_open: 1,
				},
				datatype: [{
					text: '日',
					value: 1
				}, {
					text: '月',
					value: 2
				}],
				untype: [{
					text: '收入',
					value: 1
				}, {
					text: '支出',
					value: 2
				}],
				open: [{
					text: '是',
					value: 1,
				}, {
					text: '否',
					value: 2
				}],
				rules: {
					name: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请输入品名',
							}
						],
					},
					name: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请输入品名',
							}
						],
					},
				},

				value: 0,
				range: [],
			};
		},
		components: {
			RboyUploadSfz,
		},
		created() {
			var today = new Date();
			const year = today.getFullYear();
			const month = today.getMonth() + 1;
			const day = today.getDate();

			this.formData.date_time = year + '-' + month + '-' + day;
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules);
			this.getlist();
		},
		watch: { //监视属性
			'formData.datatype': {
				deep: true,
				handler(value) {
					var today = new Date();
					const year = today.getFullYear();
					const month = today.getMonth() + 1;
					const day = today.getDate();

					if (this.formData.datatype == 1) {
						this.formData.date_time = year + '-' + month + '-' + day;
					} else {
						this.formData.date_time = year + '-' + month;
					}

				}
			},
			'formData': {
				deep: true,
				handler(value) { //变化后的值 变化前的值 可以进行一些计算
					this.formData.price_all = (this.formData.price * this.formData.num).toFixed(2);
				}
			},
		},
		methods: {
			input() {
				this.formData.price_all = this.formData.price * this.formData.num;
			},
			getlist() {
				this.$H.get('/Finance/unit').then(res => {
					this.range = res.data.list
				})
			},
			bindDateChange(e) {
				this.formData.date_time = e.detail.value;
			},
			change(e) {
				this.formData.unit = e;
			},

			// 表单提交
			submit(form) {
				if (this.formData.unit == '') {
					uni.showToast({
						icon: "none",
						title: '单价不能为空'
					})
					return false;
				}
				this.$refs.form.validate().then(res => {
					this.$H.post('/finance/add', {
						form: this.formData
					}).then(res => {
						if (res.status == 500) {
							uni.showToast({
								icon: "none",
								title: res.message
							})
						}
						if (res.status == 200) {
							uni.showToast({
								icon: "success",
								title: res.message
							})

							setTimeout(() => {
								uni.navigateBack({
									delta: 1, // 返回层数，2则上上页
									success() {
										uni.$emit('update', {
											msg: '页面更新'
										})
									}
								})
							}, 2000)
						}
					})

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>

<style lang='scss'>
	.form-tbody {
		flex-grow:1;
		flex-shrink: 1;
		overflow-y: scroll;
	}
	.user-perfetion-page {
		padding: 30px 30rpx;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		padding-bottom: 0px;
	}

	.imglist-box {
		display: flex;
		align-items: center;

		.slimg {
			width: 300rpx;
		}

		.file-imgbox {
			width: 300px;
			height: 200px;
		}
	}

	.foot {
		flex-grow: 0;
		flex-shrink: 0;
		width: 100%;
		height: 150rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit {
		width: 600rpx;
		height: 92rpx;
		background: #17BF8B;
		border-radius: 46rpx;
		color: #fff;


	}

	.input-box {
		display: flex;

		.dw {
			width: 200rpx;
			flex-grow: 0;
			margin-left: 10rpx;
			height: 100%;

		}

	}
</style>